Icon Generator es una herramienta que nos permite crear iconos en formato png, nos ofrece cinco modelos distintos y la posibilidad de escoger color de fondo y según modelo color de fuente.
Una vez creado el icono y guardado los cambios obtenemos seis tamaños 16x16px, 32x32px, 42x42px, 128x128px, 256x256px, 521x512px todos ellos listos para usar una vez descaragdo el archivo zip.
Wallpapers animales |
|
▼ |
Así se hacen los globos |
|
▼ |
Header con sombra |
|
▼ |
A veces no se trata de "esto veo esto quiero" sino de tomar ideas y aplicarlas a nuestro blog,en definitiva esa es la finalidad cuando compartimos algo.
En este caso no sé a quien agradecer la idea porque la he visto en varias plantillas, por eso el agradecimiento va para BTemplates que es el primer sitio donde vi Archel.
Como se puede apreciar en esa plantilla se ha personalizado el crosscol con una imagen que forma la sombra inferior, la idea es la misma pero aplicada a la cabecera (header)
Para los ejemplos he utilizado la plantilla Minima de Blogger que es la que mejor se presta a ser personalizada, digo esto porque con las nuevas plantillas y las creadas con el diseñador es posible que no encontremos similitud a la hora de buscar algo. Es por eso que siempre digo que si nuestra idea es personalizar la plantilla y más tarde ir aplicando ideas que vamos tomando aquí y allá siempre es mejor utilizar la Minima.
Los estilos para el header o cabecera vienen definidos de esta forma Ver código#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Cada vez utilizamos mayor resolución de pantalla y es por eso que decidimos ensanchar nuestro blog, en el ejemplo el ancho del header de 660px lo modifiqué a 990px lógicamente si nuestro header mide ese ancho en outer-wrapper tendríamos la misma o superior anchura porque es el bloque contenedor de todo el blog.
Al hacer esto también tendremos más espacio para las entradas main-wrapper y la columna sidebar-wrapper esos 330px que hemos aumentado los podemos distribuir entre main-wrapper y sidebar-wrapper queda a nuestro criterio la forma de distribuirlos.
Es muy probable que no tengamos las mismas medidas en nuestra plantilla y nos preguntemos entonces la forma de añadir esa imagen de sombra respetando las medidas que tenemos.
Tenemos la opción de crear una nueva imagen o modificar la que tenemos y adecuar las medidas a nuestro blog, para eso tendremos en cuenta que la imagen con sombra mide 957 x 22 y debe medir de ancho 33px menos de lo que tenemos en header-wrapper. Es decir que si nuestro blog tiene en header-wrapper 800px nuestra imagen debe medir 767px de ancho y 22px de alto.
¿Complicado? no lo es tanto si vamos paso a paso ¿qué tal si antes lo hacemos en ese blog de pruebas?
Descargamos la imagen y la subimos a Blogger o Picasa,la url de la imagen la utilizaremos después para añadirla en nuestra plantilla.
En edición de HTML y sin expandir plantilla buscamos los estilos mencionados anteriormente para el header y sustituimos sólo los que vemos a continuación que son
#header-wrapper - #header-inner - #header img
#header-wrapper {
background:url(url-imagen-sombra-png) no-repeat center bottom;
width:990px;
height:250px;
padding-bottom:27px;
overflow:hidden;
margin-bottom:30px;
}
#header-inner {
border: 1px solid #000000;
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header img {
height: auto;
width: 960px;
}
Si no vemos el título, recordemos que cuando subimos la imagen del banner con el gadget de cabecera debemos escoger la opción "Detrás del título y la descripción" el resultado sería algo así:
Aún queda un último paso y es conseguir que en Explorer se visualice la sombra ubicada correctamente y JMiur me facilitó la solución para corregir esas diferencias, se trata de condicionar las hojas de estilo y añadir antes de </head>
<!--[if IE]>
<style>
#header-wrapper {
background:url(url-imagen-png) no-repeat center bottom;
width:990px;
height:272px;
padding-bottom:0;
overflow:hidden;
margin-bottom:30px;
}
</style>
<![endif]-->
Y ahora si, con eso es suficiente.
Generador de texto CSS3 online |
|
▼ |
Con CSSWarp tenemos la posibilidad de conseguir efectos de texto, con las guías nos ayudaremos para crear distintas formas o diseños.
El manejo es rápido y sencillo, ofrece previsualización de los cambios que vamos realizando conforme utilizamos los controles de la izquierda. Las fuentes de Google son una opción más para escoger.
Una vez conseguimos el resultado marcamos sobre GENERATE HTML y obtenemos el código.
También podemos seleccionar entre los navegadores IE9, Opera, Firefox y Webkit.
De ese código proporcionado lo que utilizaremos serán los estilos CSS.
<style type='text/css'>
.....................
.....................
.....................
</style>
Y el html
<div id='warped'>
.....................
.....................
.....................
</div>
Para ver el resultado podemos copiar y pegar CSS y HTML en el interior de un gadget o una entrada.
Gem@ BLOG Gem@ BLOG Gem@ BLOG
REFERENCIA:Gacetilla CSS
Estilos para las páginas estáticas |
|
▼ |
En Blogger las páginas estáticas son post, entradas como las que utilizamos cada día cuando actualizamos con la única diferencia que no se muestran en la página principal ni en los archivos.
En algunas plataformas es posible aplicar estilos distintos para cada página pero en Blogger no es posible, lo que si podemos es aplicar a todas las páginas unos estilos que las diferencien de los post o incluso hacer que en las páginas estáticas no se carguen ciertas partes del blog.
En este ejemplo hemos ocultado la sidebar, los enlaces de navegación, el enlace a entradas ATOM, el título y la fecha que se muestra sobre los post si la tuviéramos. El post-footer (fecha, autor, comentarios, valoración, etiquetas) no es necesario ocultarlo porque no se muestra en las páginas.
Para hacer todo eso vamos a utilizar la condicional de las páginas estáticas:
<b:if cond='data:blog.pageType == "static_page"'>
Es necesario situarse en plantilla edición de HTML y marcar para expandir la plantilla no sin antes asegurarnos que tenemos descargado el archivo de la plantilla o copia.
Condicionamos la sidebar
<b:if cond='data:blog.pageType != "static_page"'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='xxxxxx' locked='false' title='xxxxxx' type='xxxxxx'>
Aquí tenemos lo añadido a la sidebar
.............
.............
.............
</b:widget>
</b:section>
</div>
</b:if>
Condicionamos los enlaces de navegación y entradas ATOM
<b:if cond='data:blog.pageType != "static_page"'>
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
</b:if>
Condicionamos los títulos:
<b:if cond='data:blog.pageType != "static_page"'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Condicionamos la fecha superior si la tuviéramos:
<b:if cond='data:blog.pageType != "static_page"'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
</b:if>
Al finalizar comprobamos que en vista previa no da ningún error y guardamos los cambios.
Antes de continuar nos fijamos en la anchura tiene nuestro blog, esa anchura está establecida en outer-wrapper. Copiamos width: 660px o la medida que tenga cada uno en su blog porque será la que añadiremos a las páginas.
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Nos situamos justo antes de </head> y añadimos los nuevos estilos para las páginas estáticas.
main-wrapper es el bloque que acoge en su interior los post, lo que haremos será añadirle la misma anchura que tenemos en outer-wrapper de esa forma las páginas ocuparán todo el ancho del blog.
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#main-wrapper {
width: 660px;
}
</style>
</b:if>
Al código anterior le añadimos también estilos para el contenido de las páginas que en realidad son los post, de esa formar tendrá una imagen de fondo y color y dejaremos espacio (padding) alrededor de el contendido. También le añadimos color, tamaño y tipo de fuente:
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#main-wrapper {
width: 660px;
}
.post {
background:#B6A78A url(url-imagen) no-repeat scroll center top;
color: #000000;
font-family: Georgia Serif;
font-size: 15px;
margin: 0.5em 0 1.5em;
padding: 40px 40px 0;
}
</style>
</b:if>
Y eso es todo, tenemos para jugar un rato y pasarlo entretenido.
La nueva imagen de Blogger |
|
▼ |
Los usuarios de Blogger con más de seis años en esta plataforma recordarán las movidas con la migración de las plantillas clásicas a Blogger Beta, aún recuerdo que me resistía a la migración porque me encontraba cómoda como estaba y no veía motivo de poner todo patas arriba. La curiosidad pudo con esos nervios iniciales y el cambio fue para mejor.
Paulatinamente nos fueron añadiendo novedades, algunas presentaron problemas poniendo a prueba la paciencia de los usuarios de Blogger.
2010 fue un gran año para Blogger (son palabras de Blogger Buzz) incluyeron el diseñador de plantillas, estadísticas, filtro spam en comentarios, plantillas para móviles , o las maravillosas fuentes de Google.
Pero eso no es todo porque nos avisan de un emocionante 2011 con nueva interfaz, más limpio y moderno utilizando Google Web Toolkit
Algunos de los cambios que veremos:
Otra nueva función para descubrir contenido interesante y relacionado sobre la los temas que estamos leyendo.
Sólo espero que la sorpresa de mejor resultado que en su día el diseñador de plantillas y las nuevas plantillas que tantos quebraderos de cabeza están dando. Por lo demás sólo que queda armarse de paciencia para cuando llegue el momento.
REFERENCIA:Vagabundia
Seguimos subiendo |
|
▼ |
Hay varias formas de añadir una imagen para ir a inicio del blog, algunas las llamábamos flotantes, otras aleatorias incluso añadimos no una sino dos imágenes para subir y bajar con efecto deslizante.Tampoco faltó la misma finalidad para las entradas.
¿Falta alguna? pues falta la que tengo ahora mismo funcionado pero en realidad no es una imagen, se añade en unos sencillos pasos nada distintos de las anteriores.
Justo antes de </body> añadimos lo siguiente:
<a href='#' id='backtotop'>↑<br/>
<br/>top</a>
<script type='text/javascript'>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
Si nos fijamos veremos que en negrita dice top y lo podemos cambiar por cualquier otro texto "subir" por ejemplo. La flecha está formada con caracteres unicode añadiendo ↑
A continuación nos situamos justo antes de ]]></b:skin> y ahí empieza el entretenimiento porque añadiremos los estilos comprobando en vista previa hasta conseguir un resultado de nuestro agrado.
#backtotop {
width:*;padding:5px;
position:fixed;
bottom:10px; /* distancia alto */
right:15px; /* distancia ancho */
cursor:pointer;
font:text-decoration:none;
font-family: 'century gothic','avant garde',sans-serif; /* fuente */
font-style: normal;
font-variant: normal;
font-weight: bold;
font-size: 25px; /* tamaño del texto */
line-height: .8em;
font-size-adjust: none;
letter-spacing: -3px;
font-stretch: normal;
padding:10px;
color: #ffffff !important; /* color de texto */
background:#333333; /* color de fondo */
border: 1px solid #C0C0C0; /* borde */
text-shadow: 1px 0px 0px #000000; /* sombra */
-moz-border-radius:6px; /* esquinas redondeadas */
}
Iconos banderas |
|
▼ |
Pack con 237 banderas en formato ICO y PNG, las encontraremos con o sin sombra, de 256 x 256 píxeles. Referencia y descarga recursos2D
Contenido editable |
|
▼ |
Esta es una de esas cosas que uno encuentra y le llama la atención, la pone en practica y se queda tan contento aunque en el fondo sabe que no tiene utilidad alguna, o eso piensa...
Se trata de utilizar el atributo contenteditable que permite que lo que escribimos dentro de un contenido sea editable con un click.
Escribir y Click !
<blockquote contenteditable="true">Escribir y Click !</blockquote>
Si tenemos estilos definidos para la etiqueta blockquote el contenido se mostrará con los mismos estilos de dicha etiqueta.
REFERENCIA:Kavoir
Wallpapers de alta resolución |
|
▼ |
Top sombra |
|
▼ |
Sombras aquí y allá, son la debilidad de algunos y en CSS-TRICKS nos muestran la forma de añadirla a lo largo del borde superior de la página con un breve código que añadiremos en los estilos justo antes de ]]></b:skin>
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}